<template>
	<view class="container">
		<cu-custom isBack isFixed :scrollColor="scrollColor">
			<block slot="content">{{detail.title||'产品详情'}}</block>
		</cu-custom>
		<view class="" :style="{ height: CustomBar + 'px' }"></view>
		<swiper class="product-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image :src="detail.image" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="margin-sm padding bg-white radius-sm bg-shadow">
			<view class="">{{detail.info}}</view>
			<view class="text-bold text-lg margin-top-sm">{{detail.title}}</view>
			<!-- <view class="flex align-center margin-top-sm">
				<view class="cu-tag round bg-orange light" 
					v-for="(tag, index) in 3" :key="index">
					破坏少
				</view>
			</view> -->
			<view class="margin-top-sm flex align-center">
				<text class="text-price text-green text-lg text-bold">
					<text>{{detail.price}}</text>
					<text v-if="detail.unit">/{{detail.unit}}</text>
				</text>
				<!-- <view class="margin-left-xs" @tap="toggleShow">
					<text class="">(2米起售)包含1项内容</text>
					<uni-icons type="down" color="#666" size="16"></uni-icons>					
				</view> -->
			</view>
			<!-- <view v-if="isShow" class="margin-top-sm">
				<view class="text-lg text-bold">屋面排水沟</view>
				<view class="margin-top-xs">
					<view class="text-lg">屋面排水沟</view>
					<view class="text-gray">屋面排水沟</view>
				</view>
			</view> -->
		</view>
		<!-- <view class="margin">
			<view class="text-lg">可选配置共3项可选</view>
			<view class="margin-top-sm">
				<view class="cu-tag bg-white radius xl text-gray bg-shadow" 
					:class="index==currentConfig?'active':''"
					v-for="(tag, index) in 3" :key="index"
					@tap="selectConfig(index)">
					破坏少
				</view>
			</view>
			<view v-if="currentConfig>=0" class="padding-lr margin-top-xl">
				<view class="">
					排水沟超出10米价格
				</view>
				<view class="text-gray">
					注：具体价格根据现场测量及方案设计而定
				</view>
			</view>
		</view> -->
		<view class="">
			<h-tabs :data="tabsList" :currentTab="tabsIndex" :height="60"
				:itemWidth="160" :sliderWidth="125" :sliderHeight="4" bold
				selectedColor="rgb(0, 123, 70)" sliderBgColor="rgb(0, 123, 70)" 
				@change="tabsChange"></h-tabs>
		</view>
		<view class="margin-top-sm">
			<uParse :domain="baseUrl" :html="detail.content" :tag-style="tagStyle"></uParse>
		</view>
		<view class="footer">
			<view class="flex align-center text-center">
				<view class="cuIcon-move num-btn" @tap="setNumber('reduce')"></view>
				<input class="num-input" type="number" v-model="num"/>
				<view class="cuIcon-add num-btn" @tap="setNumber('add')"></view>
			</view>
			<button class="cu-btn bg-green round lg flex-sub margin-left"
				@tap="goReserve">预约上门量房</button>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/jyf-parser/jyf-parser';
	import { BASE_URL, goodsDetail } from '@/common/api/auth';
	export default {
		components: {
			uParse
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				baseUrl: BASE_URL,
				scrollColor: 'rgba(255, 255, 255, 0)',
				id: '',
				detail: {},
				isShow: false,
				currentConfig: -1,
				tabsList: [{
					name: "产品详情",
				}],
				tabsIndex: 0,
				num: 1,
				tagStyle: {
					img: 'width:100%;display:block;',
					table: 'width:100%',
					video: 'width:100%'
				},
			}
		},
		onLoad(options) {
			this.id = options.id||''
			if(this.id) {
				this.init()
			}
		},
		methods: {
			init() {
				const that = this
				goodsDetail({id: this.id}).then(res => {
					if(res&&res.code == 1) {
						let data = res.data
						that.detail = data
						that.detail.image = /^http(s)?:\/\/.+/.test(that.detail.image)?that.detail.image:that.baseUrl+that.detail.image
					}
				})
			},
			toggleShow() {
				this.isShow = !this.isShow
			},
			selectConfig(i) {
				if(i == this.currentConfig) {
					this.currentConfig = -1
				} else {
					this.currentConfig = i
				}
			},
			tabsChange(e) {
				if(e.index == this.tabsIndex) {
					this.tabsIndex = e.index
				}
			},
			setNumber(type) {
				if(type == 'add') {
					if(this.num < 10) {
						this.num += 1
					}
				} else if(type == 'reduce') {
					if(this.num > 1) {
						this.num -= 1
					}
				}
			},
			goReserve() {
				this.$tools.to('/pages/order/reserve?goods=' + encodeURIComponent(JSON.stringify(this.detail)) + '&num=' + this.num)
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			let opacity = (scrollTop/100)>1?1:(scrollTop/100)
			this.scrollColor = `rgba(255, 255, 255, ${opacity})`
		}
	}
</script>

<style scoped>
	.container {
		padding-bottom: 110rpx;
	}
	.product-swiper {
		width: 100%;
		height: 360rpx;
	}
	.swiper-item {
		width: 100%;
		height: 360rpx;
	}
	.swiper-item image {
		width: 100%;
		height: 360rpx;
	}
	.cu-tag.active {
		color: rgb(0, 123, 70);
		border: 2rpx solid rgb(0, 123, 70);
	}

	
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 80rpx;
		background-color: #fff;
		display: flex;
		padding: 10rpx 30rpx;
		line-height: 1.2;
		box-sizing: content-box;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
	}
	.num-btn {
		width: 52rpx;
		height: 52rpx;
		line-height: 52rpx;
		background-color: #f0f0f0;
	}
	.num-input {
		width: 70rpx;
		height: 52rpx;
		line-height: 52rpx;
		background-color: #f0f0f0;
		margin: 0 10rpx;
	}
</style>